<template>
  <div class="swiper-wrapper">
		<swiper :options="swiperOption" v-if="showSwiper">
			<swiper-slide v-for="item in list" :key="item.id">
				<img :src="item.imgUrl" class="swiper-img"/>
			</swiper-slide>
			<div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
	</div>
</template>

<script>
export default {
  name: 'HomeSwiper',
	props:{
		list:Array
	},
  data () {
    return {
      swiperOption:{
				pagination: {
					el: '.swiper-pagination',
					paginationClickable :true,
				},
				loop      : true,
			}
    }
  },
	computed:{
		showSwiper(){
			return this.list.length
		}
	}
}
</script>

<style scoped lang="scss">
	
.swiper-wrapper{
	// overflow:hidden;
	width: 100%;
	height: 31.25vw;
	.swiper-img{
		width: 100%;
	}
}
</style>
